<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learn Vue</title>
</head>
<body>
  <div id="app">
    <!-- fullName 是 computed的属性，不是方法，不需要结尾加小括号 -->
    <h2>{{fullName}}</h2>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        lastName: 'Bryant'
      },
      computed: {
        // 属性名 : {...}
        // fullName: { //这个是 下面的getter的下面简写
        //   return this.firstName + ' ' +this.lastName;
        // },

        // name: 'srx',//也可以就是 getter，但是一般不在这里写
        fullName: {
          set: function(newValue) { //一般不使用
            const names = newValue.split(' ');
            this.firstName = names[0] || '';
            this.lastName = names[1] || '';
          },
          get: function() {//一般都 使用这个(仅有 get => 只读属性)
            return this.firstName + ' ' +this.lastName;
          }
        }
      }
    })
  </script>
</body>
</html>